<template>
  <div class="shop_bar">
    <div class="bar-box">
      <div class="box-left">
        <div class="cart" @click="showList">
          <span class="sugesst" v-show="totalCount > 0">{{ totalCount }}</span>
          <span class="iconfont icon-gouwuchekong"></span>
        </div>
        <div class="total-price">
          <p class="price">￥{{ totalPrice }}</p>
          <p class="post">配送费￥5</p>
        </div>
      </div>
      <div v-if="totalPrice >= 20" class="box-right">去结算</div>
      <div
        v-if="totalPrice < 20"
        class="box-right"
        style="background-color: #ccc"
      >
        还差{{ 20 - totalPrice }}配送
      </div>
      <transition name="slide">
        <div class="shop-list" v-show="isShow">
          <div class="list-content">
            <h3>已选商品</h3>
            <span @click="clearShopList">清空</span>
          </div>
          <ul>
            <li
              class="shop-item"
              v-for="(item, index) in selectFoods"
              :key="index"
            >
              <p>{{ item.name }}</p>
              <p>{{ item.specs_name }}</p>
              <span>￥{{ item.price }}</span>
              <cartListCircle
                :selectFoods="item"
                style="top: 0.106667rem"
              ></cartListCircle>
            </li>
          </ul>
        </div>
      </transition>
      <div class="mask" v-show="isShow" @click="close"></div>
    </div>
  </div>
</template>

<script>
import cartListCircle from "../shop/cartListCircle";
export default {
  components: {
    cartListCircle,
  },
  props: {
    selectFoods: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      isShow: false,
      flag: true,
    };
  },
  methods: {
    showList() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
    },
    clearShopList() {
      this.selectFoods.forEach((item) => {
        if (item.count) {
          item.count = 0;
        }
        this.isShow = false;
      });
    },
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.selectFoods.forEach((food) => {
        total += food.price * food.count;
      });
      return total;
    },
    totalCount() {
      let count = 0;
      this.selectFoods.forEach((food) => {
        count += food.count;
      });
      return count;
    },
  },
};
</script>

<style lang="scss" scoped>
.slide-enter-to,
.slide-leave {
  opacity: 1;
  transform: translateY(0);
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.shop_bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  .bar-box {
    width: 100%;
    height: 1.2rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba($color: #333, $alpha: 0.3);
    }
    .shop-list {
      position: absolute;
      width: 100%;
      background-color: #fff;
      z-index: 90;
      bottom: 1.2rem;
      left: 0;
      // transform: translateY(-100%);
      box-shadow: 2px 2px 13px #c9c9c9;
      padding-bottom: 0.64rem;
      .list-content {
        padding: 0.133333rem 0.32rem;
        background-color: #f5f5f5;
        font-size: 0.373333rem;
        display: flex;
        justify-content: space-between;
      }
      .shop-item {
        padding: 0.133333rem 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.373333rem;
        position: relative;
        p {
          font-weight: 700;
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-wrap: break-word;
        }
        span {
          color: #f60;
          font-weight: 700;
          margin-right: 2.666667rem;
        }
      }
    }
    .box-left {
      width: 70%;
      height: 100%;
      background-color: #333;
      color: #fff;
      z-index: 99;
      .cart {
        width: 1.466667rem;
        height: 1.466667rem;
        padding: 0.066667rem;
        border-radius: 50%;
        box-sizing: border-box;
        background-color: #3190e8;
        border: 4px solid #333;
        position: absolute;
        z-index: 99;
        top: -0.533333rem;
        left: 0.4rem;
        text-align: center;
        line-height: 1.146667rem;
        .sugesst {
          position: absolute;
          top: -0.213333rem;
          left: 0.8rem;
          color: red;
          width: 0.533333rem;
          height: 0.533333rem;
          background-color: red;
          color: #fff;
          line-height: 0.533333rem;
          text-align: center;
          border-radius: 50%;
        }
        .icon-gouwuchekong {
          font-size: 0.746667rem;
        }
      }
      .total-price {
        margin-left: 2rem;
        height: 100%;
        .price {
          font-size: 0.586667rem;
          font-weight: 700;
        }
        .post {
          font-size: 0.32rem;
          padding-left: 0.133333rem;
        }
      }
    }
    .box-right {
      background-color: #4cd964;
      text-align: center;
      line-height: 1.2rem;
      width: 30%;
      font-size: 0.453333rem;
      color: #fff;
      z-index: 99;
    }
  }
}
</style>